<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh">
      <!-- banner -->
      <div class="banner">
        <swiper :indicator-dots="true"
                :autoplay="true"
                :interval="2000"
                :duration="500">
          <block v-for="(item, index) in bannerImg"
                 :key="index">
            <swiper-item @click="to_detail(item)">
              <image :src="imgUrl+item.image"
                     class="slide-image" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <!-- 分类列表 -->
      <ul class="project_list"
          :class="project_list.length <= 15?'project_list':'project_list_hidden' ">
        <li class="list_item"
            v-for="(item,index) in project_list"
            :key='index'
            @click="toCategorize_list(item.id , item.name)">
          <img :src="imgUrl+item.image"
               alt=""
               class="list_img"> <br>
          <span class="list_name">{{item.name}}</span>
        </li>
      </ul>
      <p class="isShow"
         @click="clickShow"
         v-if="project_list.length > 15">
        <span class="showBtn"
              v-text="btnText"></span>
      </p>
      <div class="activity clearfix"
           v-if="activityList !== null">
        <img :src="imgUrl+item.image"
             alt=""
             class="activity_img clearfix"
             @click="activityEvent(item,type)"
             v-for="(item ,index) in activityList"
             :key="index">
      </div>
      <div class="character_Medical">
        <img :src="type== -1?'https://h5.ameimeika.com/mp_images/mp_2.1/other/@2xhealth.png':'https://h5.ameimeika.com/mp_images/mp_2.1/other/@2xoral.png'"
             class="character_Medical_img">
      </div>
      <mallList :mallList="mallList"></mallList>
    </scroll-view>
  </div>
</template>

<script>
import mallList from "@/components/mall_List/mall_List";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: imageurl,
      bannerImg: [],
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      project_list: "",
      showBtn: false,
      btnText: "展开全部",
      pageNum: 1,
      bannerImg: [],
      mallList: [],
      bgImg: false,
      str: "",
      isbottom: false,
      longitude: "",
      latitude: "",
      province: 0,
      alpha: 0,
      activityList: "", //广告位列表
      scrollTop: 0,
      type: '', //-1为健康，0为口腔
    };
  },
  components: {
    mallList
  },
  methods: {
    to_detail (item) {
      common.to_detail(item)
    },
    getSwiper () {
      common.mmk_Loading(0)
      let cate_id;
      if (this.type == -1) {
        cate_id = 10
      } else if (this.type == 0) {
        cate_id = 9
      }
      // 轮播图接口
      common.fly_post("api/v4_2/home/banners", {
        cate_id: cate_id,
        province_id: this.province
      }, msg => {
        common.mmk_Loading(1)
        let res = msg.data;
        if (res.status_code == 0) {
          this.bannerImg = res.data;
        } else {
          common.mmk_Loading(2, res.message)
          return false;
        }
      })
    },
    getListData () {
      // 分类列表
      common.mmk_Loading(0)
      let parms;
      if (this.type == -1) {
        parms = 2
      } else if (this.type == 0) {
        parms = 1
      }
      common.fly_post("api/v4_2/beauty_categories/list", {
        page: 1,
        pageSize: 10,
        type: parms
      }, msg => {
        common.mmk_Loading(1)
        let res = msg.data;
        if (res.status_code == 0) {
          this.project_list = res.data;
        } else {
          common.mmk_Loading(2, res.message)
          return false;
        }
      })
    },
    // 列表展开收起
    clickShow (e) {
      this.showBtn = !this.showBtn;
      if (this.showBtn == true) {
        this.btnText = "收起全部";
      } else {
        this.btnText = "展开全部";
      }
    },
    // 广告位列表
    getActivityData () {
      common.mmk_Loading(0)
      let cate_id;
      if (this.type == -1) {
        cate_id = 12
      } else if (this.type == 0) {
        cate_id = 11
      }
      common.fly_post("api/v4_2/home/banners", {
        cate_id: cate_id,
        province_id: this.province
      }, msg => {
        common.mmk_Loading(1)
        let res = msg.data;
        if (res.status_code == 0) {
          this.activityList = res.data;
        } else {
          common.mmk_Loading(2, res.message)
          return false;
        }
      })
    },
    //商品列表
    getData (e) {
      if (this.isbottom) {
        return false;
      };
      common.mmk_Loading(0)
      let typeid;
      if (this.type == -1) {
        typeid = 2
      } else if (this.type == 0) {
        typeid = 1
      }
      let obj = {
        pageNum: this.pageNum,
        pageSize: 10,
        lat: this.latitude,
        lng: this.longitude,
        provinceId: this.province,
        is_dashboard: 0,
        type: typeid,
      };

      if (this.hot) {
        obj.sales_sort = this.hot;
      } else if (this.star) {
        obj.star_sort = this.star;
      } else if (this.price) {
        obj.price_sort = this.price;
      } else if (e == undefined) {
      }
      let that = this;
      setTimeout(() => {
        common.fly_post("api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/projectList.html", obj, msg => {
          common.mmk_Loading(1)
          let res = msg.data;
          if (res.code == 0) {
            if (res.data.projectData.length > 0 && this.pageNum == 1) {
              this.mallList = res.data.data;
            } else if (res.data.projectData.length > 0 && this.pageNum > 1) {
              this.mallList.push(...res.data.projectData);
            } else if (res.data.projectData.length == 0 && this.pageNum > 1) {
              common.mmk_Loading(2, "已经到最底下了")
              this.isbottom = true;
              return false;
            }
          } else {
            common.mmk_Loading(2, "已经到最底下了")
            return false;
          }
        },'isjava')
      }, 200);
    },
    toCategorize_list (id, name) {
      wx.navigateTo({
        url: `/pages/package_projects/categorize_list/main?url=${id}&project_name=${name}&type=${this.type}`
      });
    },
    pullrefresh (e) {
      this.pageNum++;
      this.getData();
    },
    get_location () {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: 'gcj02',
            success (res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              that.getData();
            },
            fail () {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
              that.province_name = "湖北";
              that.province = 13;
              that.getData();
              // wx.navigateBack({
              //   delta: -10
              // });
            }
          });
        },
        fail () {
          that.province_name = "湖北";
          that.province = 13;
          that.getData();
        }
      });
    },
    scroll (e) {
      this.scrollTop = e.target.scrollTop;
      this.alpha = this.scrollTop / 200 > 1 ? 1 : this.scrollTop / 200;
    },
    // pullrefresh() {},
    activityEvent (item, type) {
      common.to_detail(item, type)
    }

  },
  onLoad (options) {
    wx.setNavigationBarColor({
      frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: '#ffffff', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.isbottom = false;
    this.pageNum = 1;
    if (options.type == -1) {  //健康
      wx.setNavigationBarTitle({
        title: "健康管理"
      })
      this.type = options.type
    } else if (options.type == 0) {  //口腔
      wx.setNavigationBarTitle({
        title: "口腔管理"
      })
      this.type = options.type
    }
    this.getSwiper(); //轮播图
    this.getListData(); //整形分类列表
    let addressObj;

    if (wx.getStorageSync("province_info")) {
      addressObj = JSON.parse(wx.getStorageSync("province_info")).province_id
    }
    if (addressObj) {
      this.province = addressObj;
      this.get_location();
    } else {
      this.getData();
    }
    this.getActivityData();

  },
  onShow () {
    let that = this;
    let addressObj;
    if (wx.getStorageSync("province_info")) {
      addressObj = JSON.parse(wx.getStorageSync("province_info")).province_id
    }
  },

};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  /* overflow: hidden; */
  padding-bottom: 48px;
  background-color: #f3f4f6;
}
// banner
.banner {
  height: 205px;
  width: 100%;
  position: relative;
  swiper {
    height: 100%;
  }
  .slide-image {
    width: 100%;
    height: 100%;
  }
}

/* 项目列表展示 */
.project_list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 15px 0 0;
  overflow: hidden;
  background-color: #fff;
}
.project_list_show {
  overflow: visible;
  /* margin-bottom: 80px; */
}
.project_list_hidden {
  height: 245px;
}
.list_item {
  height: 63px;
  width: 20%;
  margin-bottom: 15px;
  text-align: center;
  float: left;
}
.padding_bottom {
  padding-bottom: 20px !important;
}
.list_img {
  width: 40px;
  height: 40px;
  /* background-color: khaki; */
  margin-bottom: 4px;
}
.list_name {
  height: 16px;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* 展开全部样式 */
.isShow {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  background-color: #f3f4f6;
  position: relative;
}
.ulHeight {
  height: auto !important;
}
.showBtn {
  font-size: 12px;
  line-height: 37px;
  color: #666;
}
.showIMG {
  width: 22px;
  height: 12px;
  margin-top: 4px;
}
.dv {
  height: 20px;
}
/* 筛选 */
.nav {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  background-color: #fff;
}
.nav_item {
  width: 31.3%;
  text-align: center;
  line-height: 48px;
  font-size: 14px;
  color: #666;
  float: left;
  position: relative;
}
.nav_up {
  width: 7px;
  height: 4px;
  position: absolute;
  top: 35%;
  left: 70%;
}
.nav_down {
  width: 7px;
  height: 4px;
  position: absolute;
  bottom: 37%;
  left: 70%;
}
/* 全部项目样式 */
.allPeoject {
  font-size: 17px;
  color: #444;
  line-height: 44px;
  padding-left: 15px;
  margin-top: 10px;
  background-color: #fff;
}
.activity {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 14px;
  text-align: center;
  background-color: #fff;
}
.activity_img {
  width: 172px;
  height: 94px;
  margin-top: 10px;
  margin-right: 1px;
  float: left;
}
// 品质医美
.character_Medical {
  width: 100%;
  height: 40px;
  text-align: center;
  background-color: #f3f4f6;
}
.character_Medical_img {
  width: 205px;
  height: 14px;
  margin: 10px auto;
}
</style>

